Component({
  properties: {
    couponDetail: {
      type: Object,
      value: null
    }
  },
  data: {
    shareInfoObj: {},
    shareImg: {}
  },
  observers: {
    'couponDetail': function (couponDetail) {
      if (!couponDetail) {
        return;
      }
      //处理海报样式
      let fileBaseUrl = getApp().globalData.extConfig.fileBaseUrl;
      let displayInfo;
      if (couponDetail.couponType === "GENERAL") {
        displayInfo = {
          whichCoupon: "通用券",
          titleColor: "#40CBB3",
          bgImagePath: fileBaseUrl + "/wxapp/static/posterAndShare/pic_bac_tongyong.png",
          rtCenter: couponDetail.couponName
        };
      } else if (couponDetail.couponType === "DISCOUNT") {
        displayInfo = {
          whichCoupon: "折扣券",
          titleColor: "#5888E0",
          bgImagePath: fileBaseUrl + "/wxapp/static/posterAndShare/pic_bac_zhekou.png",
          rtCenter: couponDetail.discount / 10 + " 折"
        };
      } else {
        displayInfo = {
          whichCoupon: "代金券",
          titleColor: "#FCB142",
          bgImagePath: fileBaseUrl + "/wxapp/static/posterAndShare/pic_bac_daijin.png",
          rtCenter: couponDetail.reduceCost / 100 + " 元"
        };
      }
      displayInfo.couponName = couponDetail.couponName;
      displayInfo.expireTime = couponDetail.expireTime;
      displayInfo.description = couponDetail.description;
      console.info("genPoster", displayInfo)
      this.genPoster(displayInfo);
    }
  },

  methods: {
    genPoster(displayInfo) {
      //用于触发重新生成海报
      let defaultWidth = 750;
      let defaultHeight = 600;
      let canvasTemplate = {
        background: displayInfo.bgImagePath,
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [
          {
            type: "text",
            text: displayInfo.whichCoupon,
            css: {
              top: "313rpx",
              left: "626rpx",
              width: "32rpx",
              height: "99rpx",
              textAlign: "left",
              fontSize: "32rpx",
              lineHeight: "50rpx",
              color: "#fff"
            }
          },
          {
            type: "text",
            text: displayInfo.couponName,
            css: {
              top: "314rpx",
              left: "65rpx",
              width: "300rpx",
              textAlign: "left",
              fontSize: "32rpx",
              color: "#000000"
            }
          },
          {
            type: "text",
            text: displayInfo.rtCenter,
            css: {
              top: "385rpx",
              left: "430rpx",
              width: "90rpx",
              textAlign: "left",
              fontSize: "34rpx",
              color: displayInfo.titleColor
            }
          },
          {
            type: "text",
            text: `有效期至${displayInfo.expireTime},${
                displayInfo.description
            }`,
            css: {
              top: "373rpx",
              left: "67rpx",
              width: "300rpx",
              textAlign: "left",
              fontSize: "24rpx",
              lineHeight: "30rpx",
              color: "#B2B2B2"
            }
          }
        ]
      };
      this.setData({canvasTemplate: canvasTemplate, shareImg: null})
    },
    posterImgOk(e) {
      console.info("e.detail.path", e.detail.path)
      this.triggerEvent('poster', e.detail.path);
      this.setData({shareImg: e.detail.path, canvasTemplate: {}})
    }
  }
})
